<template>
  <div>
    <el-table :data="videos" border style="width: 90%" class="forma" height="700" lazy>
      <el-table-column fixed type="index" label="序号" width="150" align="center"> </el-table-column>
      <el-table-column fixed prop="vname" label="影片名" width="550" align="center"> </el-table-column>
      <el-table-column fixed prop="vaddr" label="影片预览" width="350" align="center"> </el-table-column>
      <el-table-column fixed prop="vstate" label="影片状态" width="250" align="center"> </el-table-column>
      <el-table-column fixed label="请上传影片封面" width="250" align="center">
        <template slot-scope="scope">
          <el-upload action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange">
          </el-upload>
          <el-button type="success" @click="submitUpload(scope.row)">上传到服务器</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="pass(scope.row)" type="success">审核通过</el-button><br>
          <el-button @click="deful(scope.row)" type="danger">审核失败</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        videos: [{
          vid:"20",
          vname: '12',
          vaddr: "213",
          vstate: "23",
          vimg: "3123",
        }],
        fileList: [],
      };
    },
    methods: {
      /*重新选择的时候清楚原来的文件*/
      delFile() {
        this.fileList = [];
      },
      /*文件状态改变时的钩子函数*/
      handleChange(file, fileList) { //该方法很重要,从你选择的fileList文件赋值给你定义的this.fileList
        this.fileList = fileList;
      },
      /*单击上传到服务器(提交)按钮*/
      submitUpload(video) {
        let formData = new FormData(); //文件转换
        //fileList 对应你服务器接受名称
        formData.append("fileList", this.fileList[0].raw);
        //这边"$http"我重新封装了axios,你可以改成自己的.但是必须是post来请求,
        //http://localhost:8082/yiban_zlj/fileUpload改成你服务器文件上传的API地址
        //formData请求带的数据
        //{"Content-Type": "multipart/form-data;charset=utf-8"}是文件上传必须要的
        //最后可以打印返回的服务器返回的数据,如果控制台报错接受你哪里没有写对
        this.$axios.post('vimgfileUpload.do', formData, {
          "Content-Type": "multipart/form-data;charset=utf-8"
        }).then(res => {
          this.$axios.get('updatevideo.do?vid='+video.vid+'&vimg='+res.data).then(response => {
            if(response){
              alert("图片添加成功")
            }
            else{
              alert("图片添加失败")
            }
          }).catch(function (error) {
            console.log(error);
          })
          console.log(res)
        })
      },
      pass(video){
        this.$axios.get('updatevideo.do?vid='+video.vid+'&vstate=1').then(response => {
        let flag = response.data
        if(flag>0){
          alert("审核成功");
        }
        else{
          alert("审核失败");
        }
        }).catch(function (error) {
        console.log(error);
      })
      },
      deful(video){
        this.$axios.get('deletevideo.do?vid='+video.vid).then(response => {
        let flag = response.data
        if(flag>0){
          alert("审核成功");
        }
        else{
          alert("审核失败");
        }
        }).catch(function (error) {
        console.log(error);
      })
      }
    },
    computed: {},
    mounted() {
      this.$axios.get('getvideoListnp.do').then(response => {
        this.videos = response.data
        console.log(this.videos);
      }).catch(function (error) {
        console.log(error);
      })

    }

  };
</script>

<style scoped="scoped">
  .forma {
    margin: 80px auto;
  }
</style>